<template>
  <div class="houseDetails">
    <header>
      <span class="iconfont icon-zuojiantou left" @click="toPrev"></span>
      <span class="right iconfont icon-gengduo"></span>
    </header>
    <div class="pic">
      <van-swipe
        class="my-swipe"
        :autoplay="5000"
        indicator-color="#ff5654"
        touchable
        width='750px'
      >
        <van-swipe-item v-for="(item, index) in house.houseImg" :key="index">
          <img :src="item" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="main">
        <div class="title">
            <span> {{house.houseName}} </span>
            <span> {{house.houseType}} </span>
            <span class="right"> 
                <i class="iconfont icon-xinfengkai"></i>
                <p>虚假举报</p>
            </span>
        </div>
        <ul class="baseInfo">
            <li>
                <span> {{house.priceNum}} </span>
                <p>租金</p>
            </li>
            <li>
                <span> {{house.roomTypeName}} </span>
                <p>房型</p>
            </li>
            <li>
                <span> {{house.size}}㎡ </span>
                <p>面积</p>
            </li>
        </ul>
        <ul class="describe">
            <li>楼层：{{house.floor}} </li>
            <li>装修：{{house.furnish}} </li>
            <li>朝向：{{house.orientedName}} </li>
            <li>房源更新时间：{{house.time}} </li>
        </ul>
        <footer>
            <ul>
                <li>
                    <img src="https://img2.baidu.com/it/u=4086958201,3630644852&fm=26&fmt=auto" alt="">
                    <span>
                        <p>李娜</p>
                        <p>宜居客服</p>
                    </span>
                </li>
                <li @click="toChat">微聊</li>
                <li>电话</li>
            </ul>
        </footer>

    </div>
  </div>
</template>

<script>
import { getHouseDetails } from "../../../api/index"
export default {
  data() {
    return {
        house: {
            houseImg: [
              "https://img0.baidu.com/it/u=1766450868,2241136757&fm=253&fmt=auto&app=138&f=JPEG?w=605&h=500",
              "https://img0.baidu.com/it/u=955012894,2598153174&fm=26&fmt=auto",
              "https://img1.baidu.com/it/u=370967553,492503285&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=413",
              "http://t15.baidu.com/it/u=3891851240,4129995811&fm=224&app=112&f=JPEG?w=500&h=413",
              "https://img1.baidu.com/it/u=1373242473,1627539435&fm=26&fmt=auto",
            ],
            houseName: '地壳研究院',
            houseType: '2室1厅1卫',
            square: '53.6',
            price: '6800',
            floor: '低层(共6层)',
            furnish: '精装修',
            type: '普通住宅',
            towards: '西南',
            years: '2000年'
        }
    };
  },
  methods: {
      async initHouse() {
          let id = window.localStorage.getItem("currentHouse")
          if(id) {
              let { data } = await getHouseDetails(id)
            //   console.log(data);
              this.house = data
              this.house.houseImg =  [
              `http://127.0.0.1:3000/newImg/${data.carouselMap.split('|')[0]}`,
              `http://127.0.0.1:3000/newImg/${data.carouselMap.split('|')[1]}`,
              `http://127.0.0.1:3000/newImg/${data.carouselMap.split('|')[2]}`,
              `http://127.0.0.1:3000/newImg/${data.carouselMap.split('|')[3]}`,
              `http://127.0.0.1:3000/newImg/${data.carouselMap.split('|')[4]}`,
            ];
            this.house.time = data.time.split('T')[0]
            this.house.furnish = data.title.split(' ')[1].includes('装修') ? data.title.split(' ')[1] : '未知' ;
            this.house.houseName = window.localStorage.getItem("currentHouseName")
          }else {
              let data = this.$store.state.currentHouseDetails
          }
      },
      toPrev() {
          this.$router.push(this.$store.state.prevPage)
      },
      toChat() {
          this.$router.push('/microChat')
      }
  },
  created() {
      this.initHouse()
  }
};
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
header {
  width: 100%;
  height: 88px;
  background-color: #ff5654;
  span {
    font-size: 36px;
    display: inline-block;
    margin-left: 20px;
    color: #fff;
    line-height: 88px;
  }
  .right {
    float: right;
    margin-right: 30px;
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 620px;
  text-align: center;
  background-color: #fff;
  img {
      width: 750px;
      height: 620px;
  }
}
/deep/.van-swipe__indicator {
  background-color: #fff;
}

.main {
    margin: 47px 20px 100px;
    .title {
        span {
            font-size: 32px;
            color: #4e4e4e;
        }
        .right {
            text-align: center;
            float: right;
            i {
                font-size: 42px;
            }
            p {
                font-size: 20px;
                color: #727272;
            }
        }
    }
    .baseInfo {
        box-shadow: 0 0 20px #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 55px;
        margin-bottom: 40px;
        border-radius: 8px;
        li {
            flex: 1;
            text-align: center;
            margin-bottom: 5px;
            span {
                color: #ff5654;
                font-size: 30px;
            }
            p {
                font-size: 28px;
                color: #585858;
            }
        }
    }
    .describe {
        li {
            // width: 350px;
            // float: left;
            font-size: 30px;
            margin-bottom: 40px;
            color: #585858;
        }
    }
}
footer {
    height: 80px;
    position: fixed;
    z-index: 2;
    background-color: #fff;
    left: 0;
    bottom: 0;
    border-top: 1px solid #ff3330;
    ul {
        display: flex;
        li {
            text-align: left;
            color: #fff;
            font-size: 30px;
            line-height: 80px;
            // text-align: center;
            &:nth-child(1) {
                width: 270px;
                border-radius: 50%;
                line-height: 80px;
                img {
                    margin-left: 20px;
                    width: 60px;
                    height: 60px;
                    text-align: center;
                    // line-height: 60px;
                    margin-top: 10px;
                }
                span {
                    float: right;
                    width: 165px;
                    line-height: 30px;
                    margin-top: 15px;
                    p {
                        vertical-align: top;
                        // height: 40px;
                        font-size: 28px;
                        text-align: left;
                        color: #727272;
                        &:nth-child(2) {
                            font-size: 20px;
                        }
                    }
                }
            }
            &:nth-child(2){
                text-align: center;
                width: 240px;
                background: #ff8132;
            }
            &:nth-child(3){
                text-align: center;
                width: 240px;
                background: #ff3330;
            }
        }
    }
}
</style>